import React from 'react';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import { Row, Col } from 'antd';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

type P = {
  id: string
}

const data = [
  {
    title: ['基础科学'],
    d: ['基础科技创新的母机', '战略安全的底牌', '国家富强的血脉科学']
  },
  {
    title: ['基础科学', '拔尖人才培养'],
    d: ['基础科技创新的母机', '战略安全的底牌', '国家富强的血脉科学']
  },
  {
    title: ['基础科学', '人才培养基地'],
    d: ['基础科技创新的母机', '战略安全的底牌', '国家富强的血脉科学']
  },
]

function Content2(prop: P) {

  return (
    <div id={prop.id} className="container-fluid">
      <div className="row">
        <div className="col">
          <div className="container-xxl heada1">
            <div className="row ">
              <div className="col heada1-h">
                国家政策 —“强基计划”
              </div>
            </div>
            <div className="row">
              <div className="col heada1-s">
                “Pilot Reform Program Of Enrollment For Basic Subjects”
              </div>
            </div>
            <div className="row">
              <div className="col heada1-t">
                聚焦高端芯片与软件、智能科技、新材料、先进制造和国家安全等关键领域以及国家人才紧缺的人文社会科学领域”
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-xxl-6">
          <img width="100%" src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/wenjian%201.png" alt="" />
        </div>
        <div className="col">
          <OverPack playScale={0.3} className="container-fluid">
            <QueueAnim type="scale" opacity={1} className="row">

              {
                data.map((e, key) => {
                  return (
                    <div key={key} className="col">
                      <div className="bn1">
                        {
                          e.title.map((t, key) => {
                            return <div key={key} >{t}</div>
                          })
                        }
                      </div>

                      <div className="bn2">
                        {
                          e.d.map((t, key) => {
                            return <div key="key">{t}</div>
                          })
                        }

                      </div>
                    </div>
                  )
                })
              }
            </QueueAnim>

          </OverPack>
        </div>
      </div>
    </div>
  );
}

export default Content2;
